<template>

    <swiper>
        <swiper-slide v-for="(page,index) in pages" :key="index">
            <div class="home-icons">
                <div class="icon" v-for="item in page" :key="item.id">
                    <div class="img">
                        <img class="img-content" :src="item.imgUrl">
                    </div>
                    <div class="desc">
                    {{item.desc}}
                    </div>
                </div>
            </div>
        </swiper-slide>

      
    </swiper>
  
 
</template>

<script>
export default {
    name:'HomeIcons',
   
    computed:{
        pages:function(){
            const pages=[]
            this.iconList.forEach((item,index)=>{
                const page=Math.floor(index/8)
                if(!pages[page]){
                    pages[page]=[]
                }

                pages[page].push(item)
            })

            return pages
        }
    },

    props:{
        iconList:Array
    }

}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixin.styl';
    .home-icons
       height :0
       overflow :hidden
       padding-bottom :50%
       .icon
            float: left
            width :25%
            padding-bottom :25%
            height :0
            position :relative
            .img
                position: absolute
                top:0
                left:0
                right :0
                bottom :.28rem
                
                .img-content
                    display:block
                    width :60%
                    margin :.2rem auto
            .desc
                position :absolute
                left :0
                right:0
                bottom :0
                height :.28rem
                line-height :.28rem
                text-align :center
                ecllipse()
</style>

